<template>
    <div class="room-odds-box">
        <div class="item" v-for="item of odds">
        <odds :title="item.title"
              :defaultValude="room.odds"
              v-model="item.odds"
              :odds="item.odds"
              :fields="item.fields"></odds>
        </div>

        <div class="act">
            <mt-button size="small" type="primary" class="btn" @click="submit" :disabled="loading">
                <span v-if="!loading">确定</span>
                <mt-spinner type="triple-bounce" color="white" v-if="loading"></mt-spinner>
            </mt-button>
        </div>
    </div>
</template>

<script>
    import Odds from '../../../components/lottery/odds'
    import Test from '../../../components/lottery/test'
    import apiUrl from '../../../api/apiUrl'
    import {Toast} from 'mint-ui'
    export default {
        name: "index",
        data () {
            return {
                room: {},
                defaultOdds: 10,
                odds: {
                    1: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小','龙','虎'],
                        title: '冠军'
                    },
                    2: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小','龙','虎'],
                        title: '亚军'
                    },
                    3: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小','龙','虎'],
                        title: '季军'
                    },
                    4: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小','龙','虎'],
                        title: '第四名'
                    },
                    5: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小','龙','虎'],
                        title: '第五名'
                    },
                    6: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小'],
                        title: '第六名'
                    },
                    7: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小'],
                        title: '第七名'
                    },
                    8: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小'],
                        title: '第八名'
                    },
                    9: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小'],
                        title: '第九名'
                    },
                    10: {
                        odds: [],
                        fields: [1,2,3,4,5,6,7,8,9,10,'单','双','大','小'],
                        title: '第十名'
                    },
                    and: {
                        odds: [],
                        fields: [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,'大','小','单', '双'],
                        title: '冠、亚军和'
                    }
                },
                loading: false
            }
        },
        components: {
            Odds,
            Test
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
        methods: {
            submit(){
                this.loading = true
                let params = new URLSearchParams()
                    params.append('odds', JSON.stringify(this.odds))
                    params.append('room_id', this.room.id)
                    params.append('default', this.room.odds)
                this.$http.post(apiUrl.room.setOdds, params).then(res => {
                    if (res.data.code === 0) {
                        Toast('赔率修改成功')
                    } else {
                        Toast('赔率修改失败')
                    }
                    this.loading = false
                }).catch(err => {
                    console.log(err)
                })
            },
            setData () {
                this.$http.get(apiUrl.room.roomInfo).then(res => {
                    if (res.data.code === 0) {
                        this.$set(this, 'room', res.data.result)
                        this.getOdds(res.data.result)
                    } else {
                        Toast(res.data.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            getOdds(room) {
                let params = {
                    params: {
                        room_id: room.id
                    }
                }
                this.$http.get(apiUrl.room.odds, params).then(res => {
                    if (res.data.code === 0) {
                        res.data.result.forEach((v, k) => {
                            this.odds[v.item].odds.push({
                                field: v.number,
                                odds: v.odds
                            })
                        })
                    } else {
                        console.log(res.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/bases";
    .item {
        margin-bottom: 10px;
    }
    .act {
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            width: 80%;
            margin: @lager 0;
        }
    }
</style>